<template>
  <view>
    <view class="cateBox">
      <!-- 左侧列表 -->
      <scroll-view
        class="cate-left"
        scroll-y="true"
        :scroll-top="verticalNavTop"
        scroll-with-animation
      >
        <view
          class="cate-left-list"
          v-for="(item, index) in data"
          :key="index"
          @click="tapselect(index)"
        >
          <!-- activeItem为选中状态 -->
          <view
            class="cate-left-item"
            :class="{ activeItem: currentTab == index }"
          >
            <label></label><text>{{ item.nav_title }}</text>
          </view>
        </view>
      </scroll-view>

      <!-- 右侧列表 -->
      <scroll-view
        class="cate-right"
        scroll-y="true"
        @scroll="mainScroll"
        :scroll-into-view="'cate-' + mainCur"
        scroll-with-animation
      >
        <view v-for="(item, index) in data" :key="index" :id="'cate-' + index">
          <view class="cate-right-title">
            <view class="line"></view>
            <text>{{ item.nav_title }}</text>
          </view>
          <view class="cate-right-list">
            <view
              class="cate-right-item flex-a-center"
              :class="{
                activeItem: child.course_title === currentData.course_title,
              }"
              v-for="(child, childindex) in item.course"
              :key="childindex"
              @click="itemClick(child)"
            >
              <image :src="child.course_cover" mode=""></image>
              <view class="cate-right-item-content">
                <text class="title">{{ child.course_title }}</text>
                <text class="sub-title">{{ child.course_introduction }}</text>
              </view>
              <!-- <text>{{ child.shoptitle }}</text>  -->
            </view>
          </view>
        </view>
        <view style="height: 50rpx"></view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      currentTab: 0,
      currentData: {},
      mainCur: 0,
      verticalNavTop: 0,
      list: [{}],
    };
  },
  mounted() {
    this.getHeight();
  },

  methods: {
    itemClick(item) {
      this.$emit("click", item);
    },
    //点击左侧按钮
    tapselect(index, data = {}) {
      clearTimeout(this.timer);
      this.lock = true;
      this.currentData = data;
      this.verticalNavTop = (index - 1) * 50;
      this.currentTab = index;
      this.mainCur = index;
      this.timer = setTimeout(() => (this.lock = false), 600);
    },
    //右侧滚动
    mainScroll(e) {
      if (this.lock) return;
      let scrollTop = e.detail.scrollTop + 10;
      for (let i = 0; i < this.list.length; i++) {
        if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
          this.currentTab = i;
          this.verticalNavTop = (i - 1) * 50;
          return false;
        }
      }
    },
    //获取右侧每项的top和bottom,里面需获取对应dom元素的高度，所以只能在mounted生命周期里调用
    getHeight() {
      var top = 0;
      var bottom = 0;
      var temp = 0;
      for (let i = 0; i < this.data.length; i++) {
        // let view = uni.createSelectorQuery().select("#cate-" + i);
        let view = uni
          .createSelectorQuery()
          .in(this)
          .select("#cate-" + i);
        view
          .fields(
            {
              size: true,
            },
            (data) => {
              top = temp;
              bottom = temp + data.height;
              this.list[i] = {
                top: top,
                bottom: bottom,
              };
              temp = bottom;
            }
          )
          .exec();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.cateBox {
  position: absolute;
  top: 120rpx;
  bottom: 0;
  background: #fff;
  width: 100%;
  display: flex;
}

.cate-left {
  width: 200rpx;
  background: #f4f4f4;
  height: 100%;
}

.cate-left-item {
  background: #f4f4f4;
  height: 50px;
  display: flex;
  align-items: center;
}

.cate-left-item.activeItem {
  background: #e0f6f3;
}

.cate-left-item label {
  width: 8rpx;
  height: 40px;
  float: left;
  background: #f4f4f4;
}

.cate-left-item.activeItem label {
  background: #0bbbef;
}

.cate-left-item text {
  width: 196rpx;
  font-size: 28rpx;
  display: block;
  text-align: center;
}

/* 右侧*/
.cate-right {
  // flex: 1;
}

.cate-right-title {
  text-align: center;
  font-size: 28rpx;
  margin-top: 20rpx;
  line-height: 80rpx;
  position: relative;
}

.cate-right-title .line {
  position: absolute;
  height: 2rpx;
  width: 300rpx;
  background: orange;
  top: 39rpx;
  left: 50%;
  margin-left: -150rpx;
}

.cate-right-title text {
  background: #fff;
  padding: 0 10px;
  position: relative;
  color: #999;
}

.cate-right-list {
  height: auto;
  overflow: hidden;
}

.cate-right-item {
  // width: 33.33%;
  // float: left;
  margin-top: 20rpx;

  &-content {
    .title {
      font-size: 28rpx;
      font-weight: bold;
      color: #333333;
      margin-bottom: 20rpx;
    }

    .sub-title {
      font-size: 24rpx;
      color: #999999;
    }
  }
}

.cate-right-item.activeItem {
  color: red;
  background: #e0f6f3;
}

.cate-right-item image {
  width: 200rpx;
  height: 154rpx;
  display: block;
  border-radius: 10rpx;
  margin: 0 20rpx;
}

.cate-right-item text {
  display: block;
  // text-align: center;
  font-size: 24rpx;
}
</style>
